<template>
    <div ref="viewBox">
        <slot></slot>
    </div>
</template>

<script>
export default {
    model: {
        event: "pullingUp"//自定义事件
    },
    data: function () {
        return {
            isBuzy:false,
            isActive:false
        }
    },
    methods: {
        onScroll:function() {
            if(this.isActive==true){
                if(this.lowEnough()){
                    if(this.isBuzy==false){
                        this.isBuzy=true;
                        //加载更多操作
                        //console.log("loadmore");
                        this.$emit('pullingUp',null); 
                        this.isBuzy=false;
                    }
                }
            }
        },
        lowEnough:function(){
            var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

            return pageHeight - viewportHeight - scrollHeight < 20;
        }
    },
    created: function () {
        //console.log("addscroll");
        window.addEventListener('scroll', this.onScroll);
        
        this.isActive=true;
    },
    destroyed:function(){
        //console.log("removescroll");
        window.removeEventListener('scroll', this.onScroll);
    },
    activated:function(){
        this.isActive=true;
    },
    deactivated:function(){
        this.isActive=false;
    }
}
</script>

<style></style>